<template>
  <div class="home page-tab">
    <Navbar :appTitle="appTitle" :leftArrow="false"/>
    <div class="warp">
      <template v-for="itemModule in applicationList">
        <div class="outBox" v-if="itemModule.children" :key="itemModule.id">
          <div class="topModuleName">{{itemModule.meta.title}}</div>
          <div class="botBox">
            <template v-for="item in itemModule.children">
              <div class="botItem" :key="item.id" v-if="conditionShow(item)" @click="routerChange(item)">
                <div class="itemLeft">
                  <img :src="`${apiBaseUrlDownload}jksaas-mgt/mgt${item.meta.attachment}`" alt="" class="itemLeft_img listPng" v-if="item.meta.attachment">
                  <img src="~@/assets/img/application_1.png" alt="" class="itemLeft_img listPng" v-else>
                  <div class="itemLeft_text">{{item.meta.title}}</div>
                </div>
                <img src="~@/assets/img/goNext.png" alt="" class="goNext">
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import { menuDataApi } from "@/api/mobile";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import { apiBaseUrlDownload } from "@/utils/request";
import {LING_YANG_ROLE_TYPE} from "@/store/mutation-types"
export default {
  components: { Navbar, TabBar },
  data() {
    return {
      apiBaseUrlDownload,
      appTitle: "应用",
      applicationList: [],
    };
  },
  computed: {},
  created() {
    this.applicationList = [];
    let antelopeFlag = this.$ls.get(LING_YANG_ROLE_TYPE)
    let params = {}
    if (antelopeFlag) {
      params.antelopeFlag = antelopeFlag
    }
    menuDataApi(params).then((res) => {
      let resList = res.result;
      // let theFifth = {
      //   component: "",
      //   id: "",
      //   meta: {},
      //   name: "",
      //   path: "",
      //   redirect: "",
      //   route: "",
      // };
      // let childrenArr = [];
      // for (let item of resList) {
      //   if (item.meta.title == "设备管理") {
      //     for (let k in theFifth) {
      //       theFifth[k] = item[k];
      //     }
      //     let newArr = item.children;
      //     for (let item of newArr) {
      //       if (!item.hidden) {
      //         for (let each of item.children) {
      //           childrenArr.push(each);
      //         }
      //       }
      //     }
      //   }
      // }
      // theFifth.children = childrenArr;
      this.applicationList = resList;
      // this.applicationList.splice(resList.length - 1, 1, theFifth);
    });
  },
  methods: {
    routerChange(item) {
      this.$router.push({
        path: item.path,
        query: {
          navTitle: item.meta.title,
        },
      });
    },
    conditionShow(item) {
      if (item.hidden) {
        return false;
      } else {
        let metaTitle = item.meta.title;
        let id = item.id;
        if (
          metaTitle != "点巡检方案" &&
          metaTitle != "点巡检项目" &&
          metaTitle != "保养方案" &&
          metaTitle != "保养项目" &&
          id != 1528552904961757186 &&
          id != 1529370507795972098 &&
          id != 1529650512421642241 &&
          id != 1529999108316733442 &&
          id != 1529651265706057730 &&
          id != 1530000299570372609 &&
          id != 1529999759662784514 
        ) {
          return true;
        } else {
          return false;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
div.outBox {
  margin-bottom: 20px;
  background-color: $color29;
  div.topModuleName {
    box-sizing: border-box;
    padding: 32px;
    font-size: 32px;
    font-weight: bold;
    color: #191f25;
    border-bottom: 1px solid #f0f0f0;
  }

  div.botBox {
    box-sizing: border-box;
    padding: 0 0.14rem;
    div.botItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 30px 0px;
      border-bottom: 1px solid #f0f0f0;
      div.itemLeft {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img.itemLeft_img {
          margin-right: 16px;
        }

        div.itemLeft_text {
          font-size: 28px;
          color: #191f25;
        }
      }
    }
  }
}
</style>